import { Divider, Form, Input, Space, Table, Tag, Select } from 'antd'
import Button from '@/components/button/Button'
import { useTranslation } from 'react-i18next'

import { getSourcemapListApi, downloadSourcemapApi, deleteSourcemapApi } from '@/apis/sourcemap'
import {
  BatchDeleteButton,
  CreateButton,
  ResetButton,
  SearchButton,
  DeleteButton,
} from '@/components/button'
import { SearchCol, SearchContainer, SearchRow, SearchTableContainer } from '@/components/container'
import { useSearchTableContainer } from '@/hooks/useSearchTableContainer'
import { useTable } from '@/hooks/useTable'
import {
  PlatformType,
  ProjectType,
  PlatformTypeOptions,
  ProjectTypeOptions,
} from '@/constants/sourcemap'
import dayjs from 'dayjs'
import { usePageTransfer } from '@/hooks/usePageTransfer'

export default function SourcemapList() {
  const { t } = useTranslation()

  const { listContainerProps, tableScrollY } = useSearchTableContainer()

  const { navigateWithData } = usePageTransfer()

  const {
    form,
    tableProps,
    isLoading,
    isDeleting,
    isBatchDeleting,
    handleSearch,
    handleReset,
    handleCreate,
    handleEdit,
    handleDelete,
    handleBatchDelete,
    selectedCount,
    selectedIsEmpty,
  } = useTable({
    key: 'sourcemap', // 表格唯一标识，不要与其他模块重名
    cacheEnabled: true, // 是否启用缓存
    dataStaleTime: 1000 * 60 * 10, // 数据缓存时间，10 分钟
    pagination: true, // 是否开启分页
    selectable: false, // 是否开启选择
    listApiFn: getSourcemapListApi, // 获取列表数据接口
    deleteApiFn: deleteSourcemapApi, // 删除数据接口
    scrollY: tableScrollY, // 表格高度，从 useSearchTableContainer 获取
    formInitialValues: {
      platformType: null,
      customerName: null,
      projectType: null,
    },
    columns: [
      {
        title: '平台类型',
        dataIndex: 'platformType',
        render: (_, record) =>
          PlatformTypeOptions.find(item => item.value === record.platformType)?.label ?? '-',
      },
      {
        title: '客户名称',
        dataIndex: 'customerName',
        render: (_, record) => record.customerName || '-',
      },
      {
        title: '项目类型',
        dataIndex: 'projectType',
        render: (_, record) =>
          ProjectTypeOptions.find(item => item.value === record.projectType)?.label,
      },
      { title: '版本', dataIndex: 'version' },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        render: (_, record) => dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
      },
      {
        title: t('common.actions'),
        key: 'actions',
        fixed: 'right',
        width: 140,
        render: (_, record) => (
          <>
            <Button
              type="link"
              size="small"
              icon="icon-park-outline:bug"
              className="anticon"
              onClick={() => {
                navigateWithData(
                  {
                    pathname: `/sourcemap/find-bug/${record.id}`,
                  },
                  record
                )
              }}
            ></Button>
            <Button
              type="link"
              size="small"
              icon="icon-park-outline:download"
              className="anticon"
              onClick={() => downloadSourcemapApi(record.id)}
            ></Button>
            <DeleteButton
              type="text"
              size="small"
              noText
              loading={isDeleting}
              onConfirm={() => handleDelete(record.id)}
            />
          </>
        ),
      },
    ],
  })

  // 搜索表单
  const searchForm = (
    <Form form={form} onFinish={handleSearch} autoComplete="off" colon={false}>
      <SearchContainer
        actions={
          <>
            <Space>
              <SearchButton loading={isLoading} />
              <ResetButton onClick={handleReset} />
            </Space>
            <Divider type="vertical" />
            {/* <BatchDeleteButton
              loading={isBatchDeleting}
              disabled={selectedIsEmpty}
              count={selectedCount}
              onConfirm={handleBatchDelete}
            /> */}
            <Divider type="vertical" />
            <CreateButton onClick={() => handleCreate()} />
          </>
        }
      >
        <SearchRow>
          <SearchCol name="platformType" label="平台类型">
            <Select placeholder="请选择平台类型" options={PlatformTypeOptions} allowClear />
          </SearchCol>
          <Form.Item noStyle dependencies={['platformType']}>
            {({ getFieldValue }) =>
              getFieldValue('platformType') === PlatformType.CUSTOM && (
                <SearchCol name="customerName" label="客户名称">
                  <Input placeholder="请输入客户名称" />
                </SearchCol>
              )
            }
          </Form.Item>
          <SearchCol name="projectType" label="项目类型">
            <Select placeholder="请选择项目类型" options={ProjectTypeOptions} allowClear />
          </SearchCol>
          <SearchCol name="version" label="版本">
            <Input placeholder="请输入版本" />
          </SearchCol>
        </SearchRow>
      </SearchContainer>
    </Form>
  )

  return (
    <SearchTableContainer {...listContainerProps} searchForm={searchForm}>
      <Table {...tableProps} />
    </SearchTableContainer>
  )
}
